<template>
    <div class="integral">
      <v-scroll :on-infinite="infinite"  :on-refresh = "refresh" ref="my_scroller" :dataList="scrollData" id="inteId">
          <div class="integral_lists">
              <group>
                  <cell class="list" v-for="(item,index) of currentLists" :key="index" :title="item.user_login" :inline-desc="item.department">
                      <p slot="icon" class="ranking">
                          <img src="./no.1.png" alt="" v-if="index+1 === 1" class="rank_icon">
                          <img src="./no.2.png" alt="" v-else-if="index+1 === 2" class="rank_icon">
                          <img src="./no.3.png" alt="" v-else-if="index+1 === 3" class="rank_icon">
                          <span v-else>{{index+1}}</span>
                      </p>
                      <p><span>{{item.scores}}</span>积分</p>
                  </cell>
              </group>
          </div>
        </v-scroll>
        <div v-transfer-dom>
          <popup v-model="isShow" position="right" @on-hide="hidePopup()">
            <div class="chooseBox">
              <div class="box_title">条件筛选</div>
              <div class="box_classify">
                <div class="box_name">
                  <!--<div class="classify_name">支部名称</div>-->
                  <div class="classify_search" style="margin-bottom: 2.8rem; margin-top: 4rem;">
                    <group>
                      <selector v-model="selectedData" :value-map="['id', 'department']" :options="ajaxData" placeholder="全部支部"></selector>
                    </group>
                    <!-- <model-list-select :list="ajaxData"
                             option-value="id"
                             option-text="department"
                             v-model="selectedData"
                             placeholder="全部"
                             @searchchange="searchData">
                    </model-list-select> -->
                  </div>
                </div>
              </div>
              <div class="box_button">
                <x-button type="primary" @click.native="choosedData">确定</x-button>
              </div>
            </div>
          </popup>
        </div>
    </div>
</template>

<script>
import { Group, Cell, TransferDom, Popup, Selector, XButton } from "vux";
import VScroll from "../../pull-refresh";
import { mapState, mapGetters } from "vuex";
// import { ModelListSelect } from "vue-search-select";
export default {
  directives: {
    TransferDom
  },
  components: {
    Group,
    Cell,
    Popup,
    Selector,
    // ModelListSelect,
    XButton,
    VScroll
  },
  computed: {
    ...mapGetters([
      "integPopup",
      "integralQuarterList",
      "integraYearlList",
      "integralQuarterSelect",
      "integraYearSelect",
      "integralQuarterTotal",
      "integraYearlTotal",
      "branchList"
    ])
  },
  watch: {
    integPopup: function(Value) {
      this.isShow = Value;
    },
    integralQuarterList: function(val) {
      this.currentLists = val;
    },
    integraYearlList: function(val) {
      this.currentLists = val;
    },
    integralQuarterSelect: function(val) {
      this.currentLists = val;
    },
    integraYearSelect: function(val) {
      this.currentLists = val;
    },
    // currentLists: function(val) {
    //    if (
    //     this.integralQuarterTotal <= this.num ||
    //     val.length >= this.integralQuarterTotal||this.integraYearlTotal<= this.num||val.length>=this.integraYearlTotal
    //   ) {
    //     this.scrollData.noFlag = true;
    //   } else {
    //     this.scrollData.noFlag = false;
    //   }
    // },
    quarterpage: function(val) {
      let total = Math.ceil(this.integralQuarterTotal / this.num);
      if (val > total) {
        this.scrollData.noFlag = true;
      }
    },
    yearpage: function(val) {
      let total = Math.ceil(this.integraYearlTotal / this.num);
      if (val > total) {
        this.scrollData.noFlag = true;
      }
    },
    branchList: function(val) {
      this.ajaxData = val;
    },
    $route(to, from) {
      if (to.query.status === "quarter") {
        if (this.integralQuarterList.length == 0) {
          this.$store.dispatch("getIntegralQuarterList");
        }
        this.currentLists = this.integralQuarterList;
      } else if (to.query.status === "year") {
        if (this.integraYearlList.length == 0) {
          this.$store.dispatch("getIntegralYearList");
        }
        this.currentLists = this.integraYearlList;
      }
    }
  },
  created() {
    this.$store.dispatch("getBranchList");
    if (this.$route.query.status === "quarter") {
      this.$store.dispatch("getIntegralQuarterList");
    } else if (this.$route.query.status === "year") {
      this.$store.dispatch("getIntegralYearList");
    }
  },
  activated() {
    this.ajaxData = this.branchList;
    if (this.$route.query.status === "quarter") {
      this.currentLists = this.integralQuarterList;
    } else if (this.$route.query.status === "year") {
      this.currentLists = this.integraYearlList;
    }
  },
  data() {
    return {
      quarterpage: 1,
      yearpage: 1,
      num: 10,
      scrollData: {
        noFlag: false //暂无更多数据显示
      },
      currentLists: [],
      isShow: false,
      ajaxData: [],
      selectedData: "",
      searchText: ""
    };
  },
  methods: {
    refresh(done) {
      if (this.$route.query.status === "quarter") {
        this.$store.dispatch("getIntegralQuarterList");
        this.quarterpage = 1;
      } else if (this.$route.query.status === "year") {
        this.$store.dispatch("getIntegralYearList");
        this.yearpage = 1;
      }
      done();
    },
    infinite(done) {
      if (this.$route.query.status === "quarter") {
        this.quarterpage++;
        let end = this.num * this.quarterpage;
        let i = end - this.num;
        let more = this.$el.querySelector(".load-more");
        this.$store
          .dispatch("getIntegralQuarterList", { page: this.quarterpage })
          .then(() => {
            for (i; i < end; i++) {
              if (i >= this.integralQuarterTotal) {
                more.style.display = "none"; //隐藏加载条
                // this.scrollData.noFlag = true;
                break;
              } else {
                more.style.display = "none"; //隐藏加载条
              }
            }
          });
      } else if (this.$route.query.status === "year") {
        this.yearpage++;
        let end = this.num * this.yearpage;
        let i = end - this.num;
        let more = this.$el.querySelector(".load-more");
        this.$store
          .dispatch("getIntegralYearList", { page: this.yearpage })
          .then(() => {
            for (i; i < end; i++) {
              if (i >= this.integraYearlTotal) {
                more.style.display = "none"; //隐藏加载条
                // this.scrollData.noFlag = true;
                break;
              } else {
                more.style.display = "none"; //隐藏加载条
              }
            }
          });
      }
      done();
    },
    hidePopup() {
      this.$store.dispatch("updateIntegPopup", {
        integPopup: false
      });
    },
    searchData() {
      this.searchText = searchText;
    },
    choosedData() {
      this.$store.dispatch("updateIntegPopup", {
        integPopup: false
      });
      if (this.$route.query.status === "quarter") {
        this.$store.dispatch("getIntegralQuarterSelect", {
          id: this.selectedData
        });
      } else if (this.$route.query.status === "year") {
        this.$store.dispatch("getIntegralYearSelect", {
          id: this.selectedData
        });
      }
      this.selectedData = "";
    }
  }
};
</script>

<style lang="less">
.integral {
  font-size: 0;
  height: 100%;
  padding: 0;
  background: rgb(245, 245, 249);
  position: relative;
  .yo-scroll {
    top: 2.75rem;
  }
  .integral_lists {
    padding: 0.75rem 0 0;
    .weui-cells {
      margin: 0;
    }
    .list {
      width: 100%;
      .ranking {
        width: 3.25rem;
        text-align: center;
        color: rgb(252, 136, 2);
        span {
          font-size: 1rem;
        }
      }
      .rank_icon {
        width: 1.75rem;
        height: 2.5rem;
      }
    }
    .vux-cell-primary {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .weui-cell__ft {
      color: rgb(252, 136, 2);
      font-size: 0.875rem;
      span {
        font-size: 1.125rem;
      }
    }
    .vux-label {
      font-size: 1.125rem;
    }
    .vux-label-desc {
      font-size: 0.8125rem;
      color: rgb(102, 102, 102);
    }
  }
}
</style>
